<template>
  <el-card class="box-card">
      <div slot="header" style="text-align:left">
           <h3> 企业：{{appName}}</h3>
      </div>
      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" border stripe>
        <el-table-column prop="appName" label="应用名称"  sortable width="180"></el-table-column>
        <el-table-column  prop="menus" label="资源"> 
          <template slot-scope="scope" >
			   <el-tree :ref="'tree'+scope.row.appId" 
				:data="scope.row.menus"
				show-checkbox
				node-key="id">
			  </el-tree>
            </template>
        </el-table-column>
      </el-table>
	  <div style="width:100%; border:1px solid #ccc;margin-top:20px;">
	      <div style="width:10%;line-height:50px;text-align:center; font-size:14px; display:inline-block; border-right:1px solid #ccc;">
	          种植类别
	      </div>
	      <div style="display:inline-block; width:68%;">
	          <el-checkbox-group v-model="categories"  style="margin-top:20px; margin-left:20px; display:inline-block;">
	              <el-checkbox v-for="(s,sindex) in classify"  :key="sindex" :label="s.id">{{s.name}}</el-checkbox>
	          </el-checkbox-group>
	      </div>
	  </div>
         <div style="margin-top: 20px">
          <el-button @click="sub()">确定</el-button>
        </div>
  </el-card>
</template>
<script>
import {companyAppmenu,companySetAppmenu,model_findByList,modecategory_root} from "@/request/api.js";
  export default {
    data() {
      return {
		  categories:[],
		  classify:[],
        appName:"",
        tableData: [],
        editMenuVisible:false,
        menuform:{sortNum:1},
        treeData:[],
        rules: {
          name: [
            { required: true, message: '请填写资源名称', trigger: 'blur' },
             { min: 2, max: 20, message: '长度在 2 到 20个字符', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择资源类型', trigger: 'change' }
          ],
          router: [
            {  required: true, message: '请填资源路由地址', trigger: 'change' }
          ],
          url: [
            {  required: true, message: '请填资源接口地址', trigger: 'change' }
          ],
          sortNum: [
            {  required: true, message: '请填资源排序', trigger: 'change' }
          ]
        }
      }
    },
  
    methods:{
        //加载资源树
        loadTree(){
          if (this.$route.query.id) {
              companyAppmenu(this.$route.query.id).then(res => {
                this.tableData=res.data;
				var list = res.categories
				var modelId = []
				for(var s=0;s<list.length;s++){
					modelId.push(list[s].id)
				}
				this.categories = modelId
				// console.log(modelId)
                this.$nextTick(function () {
                  if(this.tableData && this.tableData.length>0){
                     for(var i=0;i<this.tableData.length;i++){
                        this.check(this.tableData[i].menus);
                     }
                  }
                 })
              });
           
          }
        },
        //提交
        sub(){
            if(this.tableData && this.tableData.length>0){
              let param ={"companyId":this.$route.query.id,"menus":new Array()};
              for(var i=0;i<this.tableData.length;i++){
                let appChoosed =  this.$refs['tree'+this.tableData[i].appId].getCheckedNodes(false,true);
                param.menus.push.apply(param.menus,appChoosed);
              }
              for(var i=0;i<param.menus.length;i++){
                param.menus[i].resourceId=param.menus[i].id;
              }
			  param.categories = this.categories
		
              companySetAppmenu(param).then(res => {
                this.$util.success();
              });
            }
        },
      
        //递归默认选中
        check(menus){
          if(menus && menus.length>0){
            for(var i=0;i<menus.length;i++){
                if(menus[i].checked){
                  this.$refs['tree'+menus[i].appId].setChecked(menus[i].id,true,false);
                  this.check(menus[i].children);
                }
            }
          }
        },
		init(){
			modecategory_root("").then((res)=>{
				this.classify = res.data
			})
			// let companyId = localStorage.getItem("companyId")
			// let userType = localStorage.getItem("userType")
			// let data = {
			// 	companyId:companyId,
			// 	userType:userType
			// }
			// model_findByList(data).then((res)=>{
			//     this.classify = res
			
			// })
		}
    },
    
  mounted() {
	  this.init()
    this.loadTree();
    if (this.$route.query.name) {
       this.appName=this.$route.query.name
    }
  },
  }
</script>
